<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormRules } from "element-plus";
import ReCol from "@/components/ReCol";
import { FormProps } from "./types";
import { usePublicHooks } from "@/views/hooks";
import { CategoryListTree } from "@/api/pms/catogory";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    higherOptions: [], //状态其他数据,
    dictOptionData: {}, //字典数据
    id: null,
    attrGroupId: null,
    attrName: null,

    searchType: null,

    inputType: null,

    valueType: null,

    valueSelect: null,

    attrType: null,

    enable: null,

    categoryId: null,

    showDesc: null,

    createBy: null,

    createTime: null,

    updateBy: null,

    updateTime: null,

    remark: null
  })
});

const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const showValueType = ref(false);
const categotyList = ref([]);

console.log("newFormInline", newFormInline);
newFormInline.value.categoryId = parseInt(newFormInline.value.categoryId);
console.log("newFormInline", newFormInline.value);
function getRef() {
  return ruleFormRef.value;
}
//校验规则
const formRules = reactive(<FormRules>{
  attrName: [{ required: true, message: "属性名为必填项", trigger: "blur" }],
  searchType: [
    {
      required: true,
      message: "请选择是否检索",
      trigger: "blur"
    }
  ],
  inputType: [
    {
      required: true,
      message: "请选择录入方式",
      trigger: "blur"
    }
  ],
  valueType: [
    {
      required: true,
      message: "请选择值类型",
      trigger: "blur"
    }
  ],
  valueSelect: [],
  attrType: [
    {
      required: true,
      message: "请选择属性类型",
      trigger: "blur"
    }
  ],
  enable: [
    {
      required: true,
      message: "请选择启用状态",
      trigger: "blur"
    }
  ],
  categoryId: [{ required: true, message: "请选择分类", trigger: "blur" }],
  showDesc: [
    {
      required: true,
      message: "请选择快速展示",
      trigger: "blur"
    }
  ],
  remark: []
});

/**
 * 改变录入方式
 */
function changeInputType(value) {
  console.log("value", value);

  if (value == 0) {
    //手工
    showValueType.value = false;
  } else {
    showValueType.value = true;
  }
}

function changeCid(params: any) {
  console.log("params", params);
}

onMounted(() => {});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="分类" prop="categoryId">
          <el-cascader
            v-model="newFormInline.categoryId"
            class="w-full"
            :options="newFormInline.dictOptionData.categotyList"
            :props="{
              value: 'id',
              label: 'name',
              emitPath: false,
              checkStrictly: false
            }"
            clearable
            filterable
            placeholder="请选择上级分类"
            @change="changeCid"
          >
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>

        <el-form-item label="属性类型" prop="attrType">
          <el-select
            v-model="newFormInline.attrType"
            class="!w-[220px]"
            placeholder="请选择属性类型"
          >
            <el-option :label="'销售属性'" :value="0" />
            <el-option :label="'基本参数'" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="属性名" prop="attrName">
          <el-input
            v-model="newFormInline.attrName"
            clearable
            placeholder="请输入属性名"
          />
        </el-form-item>

        <el-form-item label="是否检索" prop="searchType">
          <el-select
            v-model="newFormInline.searchType"
            class="!w-[220px]"
            placeholder="请选择是否需要检索"
          >
            <el-option :label="'否'" :value="0" />
            <el-option :label="'是'" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="录入方式" prop="inputType">
          <el-select
            v-model="newFormInline.inputType"
            class="!w-[220px]"
            placeholder="请选择录入方式"
            @change="changeInputType"
          >
            <el-option :label="'手工录入'" :value="0" />
            <el-option :label="'列表中选取'" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="值类型" prop="valueType">
          <el-select
            v-model="newFormInline.valueType"
            class="!w-[220px]"
            placeholder="请选择值类型"
          >
            <el-option :label="'单值'" :value="1" />
            <el-option :label="'多值'" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item
          label="可选值列表"
          prop="valueSelect"
          v-if="showValueType"
        >
          <el-input
            v-model="newFormInline.valueSelect"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            clearable
            placeholder="请输入可选值列表[用逗号分隔]"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="启用状态" prop="enable">
          <el-switch
            v-model="newFormInline.enable"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
        </el-form-item>

        <el-form-item label="是否展示" prop="showDesc">
          <el-select
            v-model="newFormInline.showDesc"
            class="!w-[220px]"
            placeholder="请选择快速展示"
          >
            <el-option :label="'否'" :value="0" />
            <el-option :label="'是'" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="newFormInline.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            clearable
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
